<div>
  <mat-form-field appearance="fill">
    <input matInput [matDatepicker]="picker" placeholder="Choose date" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container
    *ngFor="let column of displayedColumns"
    matColumnDef="{{ column }}"
  >
    <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
    <td
      mat-cell
      *matCellDef="let element"
      [ngClass]="{ today: this.today === element[column] }"
    >
      <p class="small-p">{{ element[column] }}</p>
      <button
        mat-icon-button
        [disabled]="isOccupied(element[column])"
        (click)="openDialog($event)"
      >
        <mat-icon *ngIf="isOccupied(element[column])" class="occupied-icon"
          >perm_contact_calendar</mat-icon
        >
        <mat-icon *ngIf="!isOccupied(element[column])" class="empty-icon"
          >person_add</mat-icon
        >
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
